<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
  <meta name="viewport"
    content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />


  <script>


    if (/mobile/i.test(navigator.userAgent)) {
      window.location = 'mobile.html'
    }

  </script>

  <title>Birthday</title>
  <!--Adobe Edge Runtime-->
  <script type="text/javascript" charset="utf-8" src="completedProject_edgePreload.js"></script>
  <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
  <script src="js/snow.min.js" type="text/javascript"></script>
  <script type="text/javascript">


    createSnow('', 60);
    $(document).ready(function () {
      var flag = 0;
      var flag2 = 0;

      $("#box").click(function () {

        if (flag % 2 == 0) {

          $('#box').css({ "left": "17%", "top": "5%", "-webkit-transform": "scale(1.0)", "z-index": "1" });
          $("#box2").css("z-index", "0");
          $('#box .image').css({ "opacity": "1" });
          $(".image_content").css("background", "url(image/card.jpg)");
          $("#box").unbind("mouseover");
          $("#box").unbind("mouseleave");


        }

        if (flag % 2 != 0) {
          $('#box').css({ "left": "-15%", "top": "-15%", "-webkit-transform": "scale(0.6) rotate(-15deg)" });
          $('.image').css({ "opacity": "0.5" });
          $(".image_content").css("background", "url(image/card2.jpg)");
          $("#box").bind("mouseover", function () {
            $('#box').css({ "background-color": "#B5B5B5", "-webkit-transform": "scale(0.8) rotate(-5deg) translate(120px,20px)" });
          });
          $("#box").bind("mouseleave", function () {
            $('#box').css({ "background-color": "#B5B5B5", "-webkit-transform": "scale(0.6) rotate(-15deg)" });
          });
        }

        flag++;
      });

      $("#box2").click(function () {
        if (flag2 % 2 == 0) {

          $('#box2').css({ "right": "30%", "top": "15%", "-webkit-transform": "scale(1.3)", "z-index": "1" });
          $("#box").css("z-index", "0");
          $('#box2 .image').css({ "opacity": "1" });
          $("#imgbox").attr("src", "image/card3.jpg");
          $("#box2").unbind("mouseover");
          $("#box2").unbind("mouseleave");


        }

        if (flag2 % 2 != 0) {
          $('#box2').css({ "right": "-5%", "top": "40%", "-webkit-transform": "scale(0.9) rotate(10deg)" });
          $('.image').css({ "opacity": "0.5" });
          $("#imgbox").attr("src", "image/card4.jpg");
          $("#box2").bind("mouseover", function () {
            $('#box2').css({ "background-color": "#B5B5B5", "-webkit-transform": "scale(1.1) rotate(5deg) translate(-100px,-20px)" });
          });
          $("#box2").bind("mouseleave", function () {
            $('#box2').css({ "background-color": "#B5B5B5", "-webkit-transform": "scale(0.9) rotate(10deg)" });
          });
        }

        flag2++;
      });

      $(".overimage").mouseover(function () {
        $(".xuluimage").css({ "-webkit-transform": "scale(1.5) rotate(-3deg)", "z-index": "1", "opacity": "1" });
      });
      $(".overimage").mouseleave(function () {
        $(".xuluimage").css({ "-webkit-transform": "scale(1.0)", "z-index": "-1", "opacity": "0.8" });
      });

      $(".overimage2").mouseover(function () {
        $(".xuluimage2").css({ "-webkit-transform": "scale(1.5) rotate(-2deg)", "z-index": "1", "opacity": "1" });
      });
      $(".overimage2").mouseleave(function () {
        $(".xuluimage2").css({ "-webkit-transform": "scale(1.0) rotate(-5deg)", "z-index": "-1", "opacity": "0.8" });
      });

      $(".overimage3").mouseover(function () {
        $(".xuluimage3").css({ "-webkit-transform": "scale(1.5) rotate(-2deg)", "z-index": "1", "opacity": "1" });
      });
      $(".overimage3").mouseleave(function () {
        $(".xuluimage3").css({ "-webkit-transform": "scale(1.0) rotate(-5deg)", "z-index": "-1", "opacity": "0.8" });
      });
    });
  </script>
  <!--Adobe Edge Runtime End-->
  <link rel="stylesheet" type="text/css" href="css/index.css" />
  <link rel="stylesheet" type="text/css" href="css/grumble.min.css" />
</head>

<body>
  <div id="wrap">
    <div id="logo">
      <div id="Stage" class="EDGE-8338447"></div>
    </div>
    <div id="text2"></div>
    <div id="images_show">
      <div class="show_image1">
        <div class="clamp"></div>
        <div class="overimage">
          <div class="xuluimage"><img src="image/xulu1.jpg" width="150px" height="150px" /></div>
        </div>
      </div>
      <div class="show_image2">
        <div class="clamp2"></div>
        <div class="overimage2">
          <div class="xuluimage2"><img src="image/xulu2.jpg" width="150px" height="150px" /></div>
        </div>
      </div>
      <div class="show_image3">
        <div class="clamp3"></div>
        <div class="overimage3">
          <div class="xuluimage3"><img src="image/xulu3.jpg" width="150px" height="150px" /></div>
        </div>
      </div>
    </div>


    <div id="box2">
      <div class="image"><img id="imgbox" src="image/card4.jpg" /></div>
    </div>
    <div id="box">
      <div class="image">
        <div class="image_content"></div>
      </div>
    </div>
  </div>
  <audio id="music" controls autoplay loop>
    <source src="bgm.mp3" type="audio/mp3">
  </audio>
</body>

</html>